<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- .box { /* 宽度 200px */ width: 200px; /* 高度 200px */ height: 200px; /*
    边框 快捷键 bd */ border: 10px solid red; /* 内边距 上右下左 30px */
    padding: 30px; /* 外边距 上右下左 30px */ margin: 30px; /* div大小为280*280
    */ /* width/height+padding*2+border*2 */ } .box1 { width: 0; height: 0; /*
    transparent 是透明色 */ border: 30px solid transparent; border-top-color:
    red; } .box2 { width: 0; height: 0; /* transparent 是透明色 */ border: 30px
    solid transparent; border-right-color: red; } .box3 { width: 0; height: 0;
    /* transparent 是透明色 */ border: 30px solid transparent;
    border-bottom-color: red; } .box4 { width: 0; height: 0; /* transparent
    是透明色 */ border: 30px solid transparent; border-left-color: red; } -->
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        margin: 20px;
        float: left;
      }

      .box1 {
        border-radius: 10px;
      }

      .box2 {
        border-radius: 20px;
      }

      .box3 {
        /* 圆，正方形宽度的50% */
        border-radius: 50%;
      }

      .box4 {
        /* 圆：直接给数值，正方形宽度的一半即：圆的半径 */
        border-radius: 50px;
      }
    </style>
  </head>

  <body>
    <div class="box">我就是div盒子的内容</div>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>
